{% assign swiperContainerId = "ctps-swiper" | append: section.id %}
{% assign pagination = "ctps-pagination" | append: section.id %}
<style>
.collection-text-picture-swiper-v2-main {
    margin-top: 10px;
}
.collection-text-picture-swiper-v2-main img {
    max-width: 100%;
}
.ctps-v2-box {
    display: flex;
    width: 100%;
    align-items: flex-start;
    max-width: 95vw;
    margin: 0 auto;
}
.ctps-v2-swiper-info-title {
    font-size: 17px;
    font-weight: 500;
    color: #000;
}
.ctps-v2-left {
    width: 50%;
    position: relative;
}
.ctps-v2-left span {
    position: absolute;
    z-index: 1;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 32px;
    line-height: 1.2;
    font-weight: 400;
    text-transform: uppercase;
}
.ctps-v2-swiper-info-text {
    font-weight: 100;
    color: #666;
    line-height: 1.4;
    margin-top: 10px;
}
.ctps-v2-right {
    width: 50%;
    padding: 0px 20px 20px;
}
.ctps-v2-right .swiper-slide {
    position: relative;
}
.ctps-v2-swiper-content {
    position: absolute;
    bottom: 0;
    z-index: 1;
    padding: 0 10px;
    text-align: center;
    width: 100%;
}
.ctps-v2-pagination {
    text-align: center;
}
.ctps-v2-pagination span.swiper-pagination-bullet{
    width: 26px;
    height: 3px;
    border-radius: 0;
    opacity: 0.1;
}
.ctps-v2-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active{
    opacity: 1;
    background: #777;
}
.ctps-v2-swiper-info-link a {
    text-decoration: none;
    color: #000;
    display: inline-block;
    position: relative;
}
.ctps-v2-swiper-info-link a:after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background: #aaa;
    position: absolute;
    bottom: 0;
    left: 0;
}
@media(min-width:768px){
.ctps-v2-swiper-info-link {
    height: 0;
    overflow: hidden;
    transition: all 0.3s;
}
.ctps-v2-right:hover .ctps-v2-swiper-info-link {
    height: 40px;
}
.ctps-v2-box.ctps-v2-overturn {
    flex-flow: row-reverse;
}
}
@media(max-width:768px){
.ctps-v2-box {
    flex-flow: column-reverse;
}
.ctps-v2-left {
    width: 100%;
}
.ctps-v2-right {
    width: 100%;
}
}
</style>
<div class="collection-text-picture-swiper-v2-main">
  <div class="ctps-v2-box {% if section.settings.enableright %}ctps-v2-overturn{% endif %}">
    <div class="ctps-v2-left">
      <a href="{{ section.settings.link }}">
        <span style="color:{{ section.settings.text_color }}">{{ section.settings.image_title }}</span>
        <img src="{{ section.settings.image | img_url: 'master'  }}" alt="">
      </a>
    </div>
    <div class="ctps-v2-right">
      <div id="{{swiperContainerId}}" class="swiper ctps-v2-swiper">
          <div class="swiper-wrapper">
            {% for block in section.blocks %}
                <div class="swiper-slide">
                    <img src="{{ block.settings.image | img_url: 'master'  }}" alt="">
                    <div class="ctps-v2-swiper-content">
                    <div class="ctps-v2-swiper-info-title">{{ block.settings.title }}</div>
                    <div class="ctps-v2-swiper-info-text">{{ block.settings.text }}</div>
                    <div class="ctps-v2-swiper-info-link">
                        <a href="{{ block.settings.link }}">Shop</a>
                    </div>
                    </div>
                </div>
            {% endfor %}              
          </div>
          <div id="{{pagination}}" class="ctps-v2-pagination"></div>
      </div>

    </div>

  </div>
</div>
<script>
new Swiper('#{{swiperContainerId}}', {
    autoplay: true,
    pagination: {
      el: '#{{pagination}}',
      clickable: true,
    },
    loop: true,
});
</script>
{% schema %}
{
  "name": "v1 集合页图文模块",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "单侧大图"
    }, 
    {
        "type": "text",
        "id": "image_title",
        "label": "图片文案"
    },
    {
        "type": "color",
        "id": "text_color",
        "label": "图片文案颜色",
          "default": "#000"
    },
    {
	    "type": "checkbox",
        "id": "enableright",
        "label": "开启图片在右侧"
    },
    {
      "type": "url",
      "id": "link",
      "label": "跳转链接"
    }
  ],
  "blocks": [
        {
        "type": "swiper",
        "name": "滑块",
        "settings": [
            {
                "type": "image_picker",
                "id": "image",
                "label": "图片"
            }, 
            {
                "type": "text",
                "id": "title",
                "label": "标题"
            },
            {
                "type": "text",
                "id": "text",
                "label": "描述"
            },
            {
                "type": "url",
                "id": "link",
                "label": "跳转链接"
            }
        ]
    }
  ],
  "presets": [
    {
      "name": "v1 集合页图文模块"
    }
  ]
}
{% endschema %}
